<style scoped>
.sh-process {
  width: auto;
  overflow-x: scroll;
  white-space: nowrap;
  border-left: 0.5px solid #cccccc;
  border-top: 0.5px solid #cccccc;
  margin: 10px;
  font-size: 0;
}
.sh-procoss-header,
.process-body {
  width: 100%;
  /* width: auto;
    overflow-x:scroll; */
  white-space: nowrap;
  /* border-left: 0.5px solid red;
    border-top:0.5px solid red  */
}
.procoss-item {
  display: inline-block;
  /* width: 50px; */
  /* height: 600px; */
  /* border-left:0.5px solid red ; */
  font-size: 12px;
}
.procoss-weekitem {
  width: 35px;
}
.procoss-date,
.procoss-week,
.procoss-weekitem {
  display: block;
}
.procoss-weekitem {
  display: inline-block;
}
.procoss-date {
  border-bottom: 0.5px solid #cccccc;
  border-right: 0.5px solid #cccccc;
}
.procoss-weekitem {
  border-bottom: 0.5px solid #cccccc;
  border-right: 0.5px solid #cccccc;
  text-align: center;
}
.procoss-bodyitem {
  display: inline-block;
  border-bottom: 0.5px solid #cccccc;
  border-right: 0.5px solid transparent;
  text-align: center;
  width: 35px;
  height: 160px;
  font-size: 12px;
  position: relative;
}
.process-body {
  position: relative;
}
.process-real {
  background: blue;
  width: 0;
  height: 20px;
  left: 0;
  cursor: pointer;
  display: block;
  position: relative;
}
.process-realbody {
  position: absolute;
  /* line-height: 100px; */
  top: 65px;
  text-align: right;
}
.process-title {
  font-size: 20px;
  color: #333333;
  display: inline-block;
  margin-left: 5px;
  position: absolute;
  top: -4px;
}
.limit-lefthander {
  font-size: 12px;
  cursor: e-resize;
  display: block;
  height: 20px;
  float: left;
}
.limit-righthander {
  font-size: 12px;
  cursor: e-resize;
  display: block;
  float: right;
  height: 20px;
}
[class*="pro-top-"] {
  position: absolute;
  top: 10px;
  left: 0;
}
[class*="pro-bottom-"] {
  position: absolute;
  bottom: 10px;
  left: 0;
}
.procoss-bodyitem [class*="pro-top-"]::after {
  display: inline-block;
  height: 20px;
  width: 5px;
  content: "";
  position: relative;
  top: 35px;
  left: -31px;
  text-align: center;
}
.procoss-bodyitem [class*="pro-bottom-"]::before {
  display: inline-block;
  height: 20px;
  width: 5px;
  content: "";
  position: absolute;
  top: -29px;
  left: 0;
  text-align: center;
}
.procoss-bodyitem .pro-bottom-0::before,
.procoss-bodyitem .pro-top-0::after {
  background-color: #c51d1d;
}
.procoss-bodyitem .pro-bottom-1::before,
.procoss-bodyitem .pro-top-1::after {
  background-color: #ff7403 !important;
}
.procoss-bodyitem .pro-bottom-2::before,
.procoss-bodyitem .pro-top-2::after {
  background-color: #ceba34;
}
.procoss-bodyitem .pro-bottom-3::before,
.procoss-bodyitem .pro-top-3::after {
  background-color: #009688;
}
.procoss-bodyitem .pro-bottom-4::before,
.procoss-bodyitem .pro-top-4::after {
  background-color: #07fafc;
}
.procoss-bodyitem .pro-bottom-5::before,
.procoss-bodyitem .pro-top-5::after {
  background-color: #319abb;
}
.procoss-bodyitem .pro-bottom-6::before,
.procoss-bodyitem .pro-top-6::after {
  background-color: #ba55d3;
}
.procoss-bodyitem .pro-bottom-7::before,
.procoss-bodyitem .pro-top-7:after {
  background-color: #a0522d;
}
.procoss-bodyitem .pro-bottom-8::before,
.procoss-bodyitem .pro-top-8:after {
  background-color: #dc143c;
}
.procoss-bodyitem .pro-bottom-9::before,
.procoss-bodyitem .pro-top-9:after {
  background-color: #daa520;
}
.pro-plan::before {
  content: "计划";
  display: inline-block;
  font-size: 15px;
  position: absolute;
  left: -40px;
  top: 0;
  letter-spacing: 5px;
}
.pro-real {
  background: transparent;
  text-align: left;
}
.pro-real::before {
  content: "实际";
  display: inline-block;
  font-size: 15px;
  position: absolute;
  left: -40px;
  top: 0;
  letter-spacing: 5px;
}
</style>
<template>
  <div class="sh-process" v-if="reflsh">
    <div class="sh-procoss-header">
      <div class="procoss-item" v-for="(item,index) in weekNum" :key="'week'+index">
        <div class="procoss-date">{{showdate(index)}}</div>
  
        <div class="procoss-week">
          <div
            v-for="(week,windex) in residue(index)"
            class="procoss-weekitem"
          >{{showAllDate(index,windex)}}</div>
        </div>
              <div class="procoss-week">
          <div
            v-for="(week,windex) in residue(index)"
            class="procoss-weekitem"
          >{{showWeek(index,windex)}}</div>
        </div>
      </div>
    </div>
    <div class="process-bodycontent">
      <div class="process-body" v-for="(item,index) in colnum" :key="'col'+index">
        <div v-if="proData[index]" class="process-realbody" :style="processrealbody(index)">
          <div
            class="process-real pro-plan"
            :class="proBodyStyle"
            :style="processreal(index)"
            @mousedown="processMouseDown($event,index,0)"
            @dblclick="HandleClick(index)"
            @mouseenter="handleMouseenter(index)"
            @mouseout="handleMouseout(index)"
          >
            <div class="limit-lefthander" @mousedown.stop="LimitMouseDown($event,index,2)">&nbsp;</div>
            <div class="limit-righthander" @mousedown.stop="LimitMouseDown($event,index,1)">&nbsp;</div>
          </div>
          <div
            class="process-real pro-real"
            :class="proBodyStyle"
            :style="processreal(index)"
            @mousedown="processMouseDown($event,index,0)"
            @dblclick="HandleClick(index)"
            @mouseenter="handleMouseenter(index)"
            @mouseout="handleMouseout(index)"
          >
            <div
              v-for="(node,nodeindex) in proData[index].nodelist"
              :style="processShowNode(node,nodeindex,index)"
            ></div>
            <!-- <div class="limit-lefthander" @mousedown.stop="LimitMouseDown($event,index,2)">&nbsp;</div> -->
            <!-- <div class="limit-righthander" @mousedown.stop="LimitMouseDown($event,index,1)">&nbsp;</div> -->
          </div>

          <div
            class="process-title"
            :class="titleStyle"
            contenteditable="true"
          >{{proData[index][title]}}</div>
        </div>

        <div v-for="(item1,index1) in subNum" :key="'sub'+index1" class="procoss-bodyitem">
          <template v-if="proData[index]">
            <span
              v-for="(node,nodeindex) in proData[index].nodelist"
              :class="'pro-top-'+nodeindex"
              v-if="computedPro(node,index1,index)"
            >{{computedPro(node,index1,index)}}</span>
            <span
              v-for="(node,nodeindex) in proData[index].nodelist"
              :class="'pro-bottom-'+nodeindex"
              v-if="computedjindu(node,index1,index)"
            >{{computedjindu(node,index1,index)}}</span>
          </template>

          &nbsp;
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
moment.locale("en", {
  months :["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月",],
  weekdaysMin: ["日", "一", "二", "三", "四", "五", "六"]
});
export default {
  props: {
    startTime: {
      type: [Date, String]
    },
    endTime: {
      type: [Date, String]
    },
    proData: {
      type: Array,
      default: () => new Array()
    },
    title: {
      type: String,
      default: "title"
    },
    titleStyle: {
      type: String,
      default: ""
    },
    proBodyStyle: {
      type: String,
      default: ""
    },
    colnum: {
      type: Number,
      default: 10
    },
    setting: {
      type: Object,
      default: function(value) {
        let obj = {
          lefthander: false,
          righthander: false,
          movehander: false
        };
        if (value && value.constructor === Object) {
          for (let key in value) {
            obj[key] = value[key];
          }
        }
        return obj;
      }
    }
  },
  data() {
    return {
      unitWidth: 35.5,
      moveflag: false,
      target: null,
      startLeft: null,
      Dindex: null,
      type: null,
      movementX: 0,
      reflsh: true,
      colorlist: [
        "#c51d1d",
        "#ff7403",
        "#ceba34",
        "#009688",
        "#07fafc",
        "#319abb",
        "#BA55D3",
        "#DAA520",
        "#A0522D",
        "#DC143C"
      ]
    };
  },
  computed: {
    _startTime() {
      return moment(new Date(this.startTime)).format("YYYY-MM-DD");
    },
    _endTime() {
      return moment(new Date(this.endTime)).format("YYYY-MM-DD");
    },
    unixDiff() {
      return (
        moment(new Date(this._endTime)) - moment(new Date(this._startTime))
      );
    },
    subNum() {
      return parseInt(this.unixDiff / (1000 * 60 * 60 * 24)) + 1;
    },
    weekNum() {
      return parseInt(this.subNum / 7) + 1;
    }
  },
  methods: {
    nodeplanStyle(index) {},
    computedPro(node, index1, index) {
      if (!node.planStartTime) {
        return false;
      }
      let zindex =
        moment(new Date(node.planStartTime)) - moment(new Date(this.startTime));
      if (zindex / (1000 * 60 * 60 * 24) === index1) {
        return node.name;
      }
      return false;
    },
    computedjindu(node, index1, index) {
      if (!node.realStartTime) {
        return false;
      }
      let zindex2 =
        moment(new Date(node.realStartTime)) - moment(new Date(this.startTime));
      if (zindex2 / (1000 * 60 * 60 * 24) !== index1) {
        return;
      }
      let zindex =
        moment(new Date(node.realEndTime)) -
        moment(new Date(node.realStartTime));
      let zindex1 =
        moment(new Date(node.planEndTime)) -
        moment(new Date(node.planStartTime));
      let bilv = (zindex / zindex1).toFixed(2) - 1;

      if (bilv > 0) {
        return `慢${Math.abs(bilv) * 100}%`;
      }
      if (bilv < 0) {
        return `快${Math.abs(bilv) * 100}%`;
      }
      if (bilv == 0) {
        return `正常`;
      }
      return false;
    },
    reload() {
      this.reflsh = false;
      this.$nextTick(() => {
        this.reflsh = true;
      });
    },
    handleMouseout(index) {
      this.$emit("itemMoveOut", index);
    },
    handleMouseenter(index) {
      this.$emit("itemMoveEnter", index);
    },
    datechange() {
      return false;
      const { target, Dindex } = this;
      const data = this.proData[Dindex];
      const width = this.movementX;
      const num = parseInt(width / this.unitWidth);
      let startTime = this.type === 0 || this.type === 2 ? num : 0;
      let endTime = this.type === 0 || this.type === 1 ? num : 0;
      startTime = width > 0 ? startTime : startTime - 1;
      endTime = width > 0 ? endTime : endTime - 1;
      this.reload();
      return {
        startTime,
        endTime,
        Dindex
      };
    },
    moveflagEnd() {
      if (this.moveflag && this.target) {
        this.$emit("timeChange", this.datechange());
      }
      this.moveflag = false;
      this.target = null;
      this.startLeft = null;
      this.movementX = 0;
    },
    HandleClick(index) {
      this.$emit("itemClick", index);
    },
    processMouseDown(event, index, type) {
      event = event || window.event;
      this.target = event.target;
      this.moveflag = true;
      this.Dindex = index;
      this.type = type;
      this.startLeft = event.target.parentNode.style.left;
    },
    LimitMouseDown(event, index, type) {
      event = event || window.event;
      this.target = event.target.parentNode;
      this.moveflag = true;
      this.Dindex = index;
      this.type = type;
      this.startLeft = event.target.parentNode.parentNode.style.left;
    },
    processMove(event) {
      if (this.moveflag && this.target) {
        event = event || window.event;
        this.movementX = this.movementX + event.movementX;
        if (this.setting.movehander && this.type == 0) {
          this.target.parentNode.style.left =
            parseFloat(this.target.parentNode.style.left) +
            event.movementX +
            "px";
        }
        if (this.setting.lefthander && this.type == 1) {
          this.target.style.width =
            parseFloat(this.target.style.width) + event.movementX + "px";
        }
        if (this.setting.righthander && this.type == 2) {
          this.target.parentNode.style.left =
            parseFloat(this.target.parentNode.style.left) +
            event.movementX +
            "px";
          this.target.style.width =
            parseFloat(this.target.style.width) - event.movementX + "px";
        }
      }
    },
    residue(index) {
      return this.subNum - 7 * index > 7 ? 7 : this.subNum - 7 * index;
    },
    showWeek(index, windex) {
      return moment(new Date(this._startTime))
        .add(7 * index + windex, "days")
        .format("dd");
    },
    showAllDate(index, windex) {
      return moment(new Date(this._startTime))
        .add(7 * index + windex, "days")
        .format("DD");
    },
    showdate(index) {
      return moment(new Date(this._startTime))
        .add(7 * index, "days")
        .format("YYYY-MMMM-ww周");
    },
    processreal(index) {
      const data = this.proData[index];
      const unixDiff2 =
        moment(new Date(data.endTime)) - moment(new Date(data.startTime));
      const width =
        this.unitWidth * (parseInt(unixDiff2 / (1000 * 60 * 60 * 24)) + 1);
      return {
        width: width + "px"
      };
    },
    processShowNode(node, nodeindex, index) {
      const data = node;
      const _this = this;
      const unixDiff2 =
        moment(new Date(node.realEndTime)) -
        moment(new Date(node.realStartTime));
      const width =
        this.unitWidth * parseInt(unixDiff2 / (1000 * 60 * 60 * 24));
      return {
        width: width + "px",
        display: "inline-block",
        height: "100%",
        background: "#07fafc"
      };
    },
    processrealbody(index) {
      const data = this.proData[index];
      const unixDiff =
        moment(new Date(data.startTime)) - moment(new Date(this.startTime));
      const left = this.unitWidth * parseInt(unixDiff / (1000 * 60 * 60 * 24));
      return {
        left: left + "px"
      };
    }
  },
  mounted() {
    document.addEventListener("mouseup", this.moveflagEnd);
    document.addEventListener("mousemove", this.processMove);
  },
  destroyed() {
    document.removeEventListener("mouseup", this.moveflagEnd);
  }
};
</script>
